<template>
	<view class="page">
		<image src="/static/dingbu.png" class="mine-navbar-bg" :style="{ height: navbarHeight + 'rpx' }" mode="aspectFill"></image>
		<u-navbar title="机构审核进度" :autoBack="true" leftIconColor="#fff" bgColor="transparent" :titleStyle="{ color: '#fff' }"
			safeAreaInsetTop placeholder></u-navbar>

		<view class="timeline">
			<view class="tl-line"></view>
			<view class="tl-item" v-for="(it, idx) in list" :key="idx">
				<view class="tl-left"></view>
				<view class="tl-dot" :style="{ backgroundColor: it.color }"></view>
				<view class="tl-card">
					<view class="row"><text class="label">发送：</text><text class="value">{{ it.sender }}</text></view>
					<view class="row"><text class="label">操作时间：</text><text class="value">{{ it.time }}</text></view>
					<view class="row"><text class="label">操作类别：</text><text class="value">{{ it.action }}</text></view>
					<view class="row"><text class="label">接受者：</text><text class="value">{{ it.receiver || '-' }}</text></view>
					<view class="row" v-if="it.reason"><text class="label">退回原因：</text><text class="value">{{ it.reason }}</text>
					</view>
					<view class="row"><text class="label">状态：</text><text class="value">{{ it.status }}</text></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import navbarMixin from '@/common/navbarMixin'
export default {
	mixins: [navbarMixin],
		data() {
			return {
				list: [{
						sender: '航天信息',
						time: '2025-08-22',
						action: '发送',
						receiver: '山东省自然资源厅',
						reason: '',
						status: '已完成',
						color: '#FF8A00'
					},
					{
						sender: '山东省自然资源厅',
						time: '2025-08-22',
						action: '发送',
						receiver: '路鹏',
						reason: '',
						status: '已完成',
						color: '#22C55E'
					},
					{
						sender: '路鹏',
						time: '2025-08-22',
						action: '发送',
						receiver: '山东省自然资源厅',
						reason: '',
						status: '已完成',
						color: '#EF4444'
					},
					{
						sender: '山东省自然资源厅',
						time: '2025-08-22',
						action: '办结',
						receiver: '',
						reason: '',
						status: '已完成',
						color: '#10B981'
					}
				]
			};
		}
	}
</script>

<style lang="scss">
	.mine-navbar-bg {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		
	}

	.page {
		background: #f6f7fb;
		min-height: 100vh;
	}

	.timeline {
		position: relative;
		padding: 20rpx 20rpx 40rpx 96rpx;
	}

	.tl-line {
		position: absolute;
		left: 48rpx;
		top: 16rpx;
		bottom: 0;
		width: 8rpx;
		background: #e7e9ee;
		border-radius: 8rpx;
	}

	.tl-item {
		position: relative;
		display: grid;
		grid-template-columns: 20rpx 1fr;
		column-gap: 20rpx;
		margin-bottom: 28rpx;
	}

	.tl-left {
		width: 96rpx;
		position: relative;
		height: 100%;
	}

	// 时间轴线相对.timeline: left=48rpx，线宽8rpx -> 中心=52rpx；.tl-item 起点=timeline padding-left=96rpx
	// 圆点宽28rpx -> 需要 left = (52 - 14) - 96 = -58rpx，使圆点中心落在轴线中心
	.tl-dot {
		position: absolute;
		left: -58rpx;
		top: 50%;
		transform: translateY(-50%);
		width: 28rpx;
		height: 28rpx;
		border-radius: 50%;
		box-shadow: 0 0 0 6rpx #fff;
		z-index: 2;
	}

	.tl-card {
		background: #fff;
		border-radius: 20rpx;
		padding: 26rpx 26rpx;
		box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.04);
	}

	.row {
		display: flex;
		line-height: 48rpx;
	}

	.label {
		width: 210rpx;
		color: #9aa1ad;
		font-size: 28rpx;
		display: inline-flex;
		align-items: center;
	}

	.value {
		color: #2b2f36;
		font-size: 30rpx;
	}
</style>